<template>
  <div class="page">
    <van-popup v-model="show" position="left" :style="{ height: '100%' }">
      <div class="home-menu-aside">
        <div class="title">所有报表</div>
        <ul class="menu-list">
          <li class="item">
            <span class="menu-icon"></span> 
            <span class="menu-title">总订单趋势</span>
          </li>
          <li class="item active">
            <span class="menu-icon"></span> 
            <span class="menu-title">商家增减量</span>
          </li>
          <li class="item">
            <span class="menu-icon"></span> 
            <span class="menu-title">逾期商家</span>
          </li>        
        </ul>
        <ul class="menu-list">
          <li class="item">
            <span class="menu-icon"></span> 
            <span class="menu-title">妥投率</span>
          </li>
          <li class="item">
            <span class="menu-icon"></span> 
            <span class="menu-title">鲜仓满仓率</span>
          </li>
        </ul>
        <ul class="menu-list">
          <li class="item">
            <span class="menu-icon"></span> 
            <span class="menu-title">客诉率</span>
          </li>
          <li class="item">
            <span class="menu-icon"></span> 
            <span class="menu-title">滞销比</span>
          </li>
        </ul>
      </div>
    </van-popup>
    <div class="top-title solid-bottom">
      <div class="title" @click="show =!show">{{$route.meta.title}}</div>
    </div>
    <router-view/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false
    };
  }
};
</script>
<style lang="less" scoped>
.page{
  background-color: #fff;
}
.top-title{
  padding: 20px 40px;
  .title{
    font-size:48px;
    font-weight:600;
    color:#0A0F24;
  }
}
.home-menu-aside{
  width: 460px;
  height: 100%;
  padding-top: 90px;
  .title{
    font-size:34px;
    font-weight:600;
    color:#0A0F24;
    line-height:48px;
    padding-left: 40px;
    margin-bottom: 30px;
  }
  .menu-list{
    margin-bottom: 40px;
    .item{
      height: 76px;
      line-height: 76px;
      padding-left: 52px;
      border-left:8px solid transparent;
      &.active{
        background:rgba(229,229,229,0.2);
        border-left:8px solid #00C188;
      }
    }
    .menu-icon{
      display: inline-block;
      width: 26px;
      height: 26px;
      background: #E5E5E5;
      border-radius:6px;
    }
    .menu-title{
      font-size:32px;
      margin-left: 20px;
    }
  }
}
</style>


